<template>
  <div>
    <header>
      <div class="left">
        <div class="null"></div>
        <p>
          <el-icon><expand /></el-icon>
          <span>{{ title }}{{ title2 }}</span>
        </p>
      </div>
      <div class="right">
        <div class="b">
          <div class="null"></div>
          <span class="iconfont icon-sousuo"></span>
          <span class="iconfont icon-quanping"></span>
          <span class="iconfont icon-shezhi"></span>
        </div>
        <router-link to="/home/gerenzhongxin">
          <img src="../../../src/assets/img/R-C.png" alt="" v-if = 'userFlag' />
          <img src="../../assets/img/login.jpg" alt="" v-else />
        </router-link>

        <p>
          <span>个人中心</span>
        </p>
      </div>
    </header>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import { useStore } from "vuex";
import { Expand } from "@element-plus/icons-vue";

export default defineComponent({
  setup() {
    const store = useStore();
    const title = computed(() => {
      return store.state.title;
    });
    const title2 = computed(() => {
      return store.state.title2;
    });
    console.log(store.state.user);
    const user = computed(()=>{
      return store.state.user
  })
    const userFlag =localStorage.getItem('userFlag')
    // let flag = 1;
    // if (userFlag.value) {
    //   flag = 1;
    // } else {
    //   flag = 2;
    // }
    return {  title, title2 ,user ,userFlag};
  },
  // mounted:{
  //     let flag = 1;
  //   if (userFlag.value) {
  //     flag = 1;
  //   } else {
  //     flag = 2;
  //   }
  // },
  // computed:{
  //   userFlag(){
  //     return this.$store.state.user.userFlag;
  //   }
  // },
  components: {
    Expand,
  },
});
</script>

<style lang="less" scoped>
header {
  width: 100%;
  height: 64px;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 37px;
  min-width: 500px;
  .right {
    font-size: 12px;
    p {
      padding-top: 23px;
    }
    span {
      margin-left: 18px;
    }
    display: flex;
    align-items: center;
    img {
      border-radius: 50%;
      width: 46px;
      height: 46px;
      margin-left: 60px;
      cursor: pointer;
    }
  }

  .null {
    height: 23px;
  }
}
</style>
